<template>
  <div>
    <p>Composition API</p>
    <p>{{ message }}</p>
    <p>
      <button @click="change">改变</button>
    </p>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    console.log('---this---', this)
    // 除了少部分代码，其它所有代码统统写在这里(数据模型定义、方法、计算属性、watch都写在这一坨)
    const message = ref('你是一个好人')
    const change = () => {
      message.value = '你这个损色'
    }

    // xxx
    // xxx

    // yyy
    // yyy

    // 这个很繁琐，上面定义的模型定义、方法、计算属性、watch等，都要在这里返回
    return {
      message,
      change
    }
  }
}
</script>
